<script setup lang="ts">
import { useConfig } from "@/stores/counter";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import LeftVue from "./components/Left.vue";
import RightVue from "./components/Right.vue";
const { config } = storeToRefs(useConfig());

const image = ref(`url(../public/${config.value.backgroundImage})`);
</script>

<template>
  <div class="app">
    <el-row :gutter="20" justify="space-around">
      <el-col :span="6">
        <LeftVue></LeftVue>
      </el-col>
      <el-col :span="14">
        <RightVue></RightVue>
      </el-col>
    </el-row>
    <el-footer>© 2023 路运超</el-footer>
  </div>
</template>

<style scoped >
.app {
  width: 100%;
  height: 100%;
  background-image: v-bind(image);
  background: repeat center/center;
}
::v-deep(.el-row){
  margin: 0 180px !important;
  padding-top: 20px;
}
.el-col{
  background-color: white;
  border-radius: 10px;
  box-shadow: 2px 2px #d4d3d3;
}
.el-footer{
  height: 20px;
  text-align: center;
  margin: 10px 0;
}
</style>
